<template>
  <div class="righthead">
    <div class="righthead-left">
      <div v-for="(item, index) in props.tablerightfromvalue" :key="index" class="component-item">
        <div class="righthead-name">{{ item.name }}:</div>
        <!-- 输入框 -->
        <el-input class="righthead-input" v-if="item.type === 'input'" v-model="props.tablerightfrom[item.value]"
          :placeholder="item.placeholder || '请输入内容'"></el-input>


        <!-- 下拉框 -->
        <el-select class="righthead-select" v-else-if="item.type === 'select'"
          v-model="props.tablerightfrom[item.value]" :placeholder="item.placeholder || '请选择'"
          popper-class="form-select">
          <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value">
          </el-option>
        </el-select>

        <!-- 时间选择器 -->
        <el-date-picker class="righthead-datepicker" v-else-if="item.type === 'date'"
          v-model="props.tablerightfrom[item.value]" type="date" format="YYYY-MM-DD" start-placeholder="开始时间"
          end-placeholder="结束时间" />
        <template v-else-if="item.type === 'times'">
          <el-date-picker style="width: 19rem !important" v-model="props.tablerightfrom[item.value]" type="daterange"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" />
        </template>
      </div>
      <!--  -->
      <div v-if="props.issearchbtn" class="righthead-btn">
        <el-button class="btnclass" size="small" :class="{ 'btnclassiinfo': btnitem.type == '' }" :type="btnitem.type"
          v-for="(btnitem, btnindex) in props.searchbtn" :key="btnindex" @click="btnclick(btnitem)">
          {{ btnitem.name }}
        </el-button>
      </div>
    </div>
    <!--  -->
    <div v-if="props.istablerightbtn" class="righthead-right">
      <el-button size="small" class="btnclass" :type="btnitem.type" v-for="(btnitem, btnindex) in props.tablerightbtn"
        :key="btnindex" @click="btnclick(btnitem)">
        {{ btnitem.name }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
const props = defineProps({
  tablerightfrom: {
    type: Object,
    default: () => { }
  },
  tablerightfromvalue: {
    type: Array,
    default: () => []
  },

  issearchbtn: {
    type: Boolean,
    default: false
  },
  searchbtn: {
    type: Array,
    default: () => []
  },
  istablerightbtn: {
    type: Boolean,
    default: false
  },
  tablerightbtn: {
    type: Array,
    default: () => []
  }
})

const btnclick = inject('searchbtnfun')

onMounted(() => {


})
</script>

<style lang="less" scoped>
.righthead {
  height: 60px;
  // background: red;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .righthead-left {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;

    // .righthead-btn {
    //   width: 120px;

    //   .btnclass {
    //     width: 64px;
    //     height: 32px;
    //     margin-left: 20px;
    //   }
    // }
  }

  .btnclass {
    width: 64px;
    height: 32px;
    margin-left: 20px;
  }

  .btnclass:first-child {
    margin-left: 10px;
  }

  .btnclassiinfo {
    background: transparent;
    color: #1d6db7;
    border: 1px solid #1d6db7;
  }

  // RGBA(4, 134, 254, 1)

  .righthead-right {}
}

.component-item {
  display: flex;
  align-items: center;

  .righthead-name {
    color: #C7F5F5;
    min-width: 70px;
  }
}


.righthead-input {
  width: 160px;
  margin-right: 20px;
}

.righthead-select {
  width: 160px;
  margin-right: 20px;
}

.righthead-datepicker {
  width: 260px;
}



:deep(.righthead-timepicker) {
  width: 160px !important;
  margin-right: 12px;
}

:deep(.el-range-editor) {
  background: #11375b !important;
  box-shadow: #1d6db7 0px 0px 0px 0.815104px inset !important;

}

:deep(.el-date-editor .el-range-input) {
  color: #cbe7ff !important;
}
</style>